<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入外部文件-->
    <script src="./node_modules/vue/dist/vue.js" ></script>
</head>

<body>
<div id="app">
    {{msg}}
    <br>
    {{1+1}}
    <br>
    {{flag ? "喜欢我" : "不喜欢我"}}

    <input type="button" value="点我" @click="myClick()">

    <span v-html="hello"></span>
    <br>
    <span v-text="hello"></span>


</div>
</body>

<script>

    var vm = new Vue({
        el:"#app",
        data:{
            msg:"我是一位帅气高冷富有强壮可爱的男人",
            id:null,
            flag:true,
            hello:"<h1>黑马胡歌燕海喆</h1>"
        },
        methods:{
            lang(){
                this.id = setInterval(() => {
                    var start = this.msg.substring(0,1);
                    // 从第2个切到最后
                    var end = this.msg.substring(1);
                    this.msg = end + start;
                },400)
            },
            stop(){
                clearInterval(this.id)
            },
            myClick(){
                this.flag = !this.flag;
            }

        }
    })

</script>

</html>